

:root {
    --HD_bg: 	        hsl(210, 15%, 24%);
    --HD_button: 	    hsl(210, 15%, 34%);
    --HD_button_border: hsl(210, 15%, 15%);
    --HD_button_text: 	hsl(0, 0%, 80%);
    --HD_label:      	hsl(32, 93%, 45%);
    --HD_highlight:    	hsl(210, 80%, 45%);
    --HD_enabled:    	hsl(40, 100%, 40%);
    --HD_sentence:     	hsl(0, 100%, 33%);
}



body, html {
    background-color: var(--HD_bg);
}

div{
    font-family: Tahoma, Verdana, Segoe, sans-serif;
}

label {
    color: var(--HD_label);
}

button {
    background-color:var(--HD_button);
    color: var(--HD_button_text);
    /* border: none; */
    /* padding: 15px 32px; */
    text-align: center;
    display: inline-block;
    font-size: 20px;
    height: 7.0rem;
    width: 8.0rem;

    border: 0.1rem solid  var(--HD_button_border);
    border-radius: .4rem;
}
button:hover, button:focus {
    background-color: var(--HD_highlight);
}

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2.5); /* IE */
  -moz-transform: scale(2.5); /* FF */
  -webkit-transform: scale(2.5); /* Safari and Chrome */
  -o-transform: scale(2.5); /* Opera */
  padding: 10px;
}

.checkboxtext
{
  font-size: 130%;
  display: inline;
}

.ctrl_container {
    width: 100%;
}

.habsentence_text {
    font-size: 12px;
    color: var(--HD_sentence);
}

.ctrl_box {
    color: var(--HD_label);
    background-color: transparent;
    border: 0.1rem solid var(--HD_button_border);
    border-radius: .4rem;
    height: 2.5rem;
    padding: .6rem 1.0rem;
    width: 50px;
}

.increment_button {
    background-color: var(--HD_button);
    border: none;
    color: var(--HD_button_text);
    text-align: center;
    display: inline-block;
    font-size: 20px;
    height: 60px;
    width: 80px;

    border: 0.1rem solid  var(--HD_button_border);
    border-radius: .4rem;
}


/* DropDown Menu */

/* wrapper */
.MenuWrapperDiv {
    position: relative;
    display: inline-block;
}
.MenuWrapperDiv a:hover {background-color: rgb(75, 231, 14)}


.MenuDropButton {
    background-color:var(--HD_button);
    border: none;
    color: var(--HD_button_text);
    text-align: center;
    display: inline-block;
    font-size: 20px;
    width: 23.5rem;
    height: 7.0rem;

    border: 0.1rem solid  var(--HD_button_border);
    border-radius: .4rem;
}
.MenuDropButton:hover, .MenuDropButton:focus {
    background-color: var(--HD_highlight);
}


/* Dropdown Content (Hidden by Default) */
.MenuDropMenu {
    display: none;
    position: absolute;
    background-color: #46d41b;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.MenuDropMenu button {
    display: block;
    /* color: black; */
    padding: 16px 16px;
    text-decoration: none;
    font-size: 16px;
    width: 23.5rem;
    height: 7.0rem;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

.HD_ssdv_modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
}

.HD_ssdv_modal img {
    width: 50%;
    height: 50%;
    display: block;
  margin-left: auto;
  margin-right: auto;

}